import React, { memo ,shallowequal,useEffect,useRef} from 'react'
import {useSelector} from 'react-redux'
import {HNLricPannelWrap,HNLricPannelContent} from './style'
import classNames from 'classnames'
import {scrollTo} from 'utils/ui-helper'
export default memo(function HNLricPannel() {

  const {lyric,currentLyricIndex} = useSelector(state => ({
    lyric : state.getIn(["player","lyric"]),
    currentLyricIndex : state.getIn(["player", "currentLyricIndex"])
  }),shallowequal)
  const HNLricPannelWrapRef = useRef();

  useEffect(()=>{
    scrollTo(HNLricPannelWrapRef.current,(currentLyricIndex - 3) * 32);
  },[currentLyricIndex])

  return (
    <HNLricPannelWrap ref={HNLricPannelWrapRef}>
      <HNLricPannelContent>
        {
          lyric.map((item,index)=>{
            return(
              <div className={classNames("lyric-item",
              {"active":currentLyricIndex ===index})} 
              key={item.time}>{item.content}</div>
            )
          })
        }
      </HNLricPannelContent>
    </HNLricPannelWrap>
  )
})
